<template>
  <div class="EducationlevelBox">
    <div class="d-flex pt-2 pl-2">
      <div class="d-flex">
        <span><i class="iconfont icon-tongji4" /></span>
        <span class="mx-2" @click="goToPersonnelInfoCapsuleBarChartView">学历</span>
      </div>
    </div>
    <!-- 将饼状图容器放在这里 -->
    <div class="d-flex jc-center chart-container">
      <div id="Educationlevel-pie" style="width: 320px;height:199px;"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
// 引入ECharts库
import * as echarts from "echarts";
export default defineComponent({
  name: "EducationlevelView",
  // 组件的选项和方法
  props:{
    CampusArea: {
      type: String,
      default: '' // 如果没有传入 title，默认值为空字符串
    }
  },
  data() {
    return {
      // 数据属性
    };
  },
  methods: {
    goToPersonnelInfoCapsuleBarChartView() 
    { 
      // 可以将 title 作为参数传递到路由中
      this.$router.push({ 
        name: this.CampusArea=="汾阳"?"FengYnagPersonnelInfoCapsuleBarChart":"PuJiangPersonnelInfoCapsuleBarChart",
        query:{CapsuleBarChartTitle:this.CampusArea,DataContent:'学历'}
      });
    },
    initECharts() {
      // 获取ECharts容器
      const chartDom = document.getElementById("Educationlevel-pie");
      const myChart = echarts.init(chartDom);

      // 配置项
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%", // 修改这里，在数值后面加上 %
        },
        legend: {
          orient: "horizontal", // 水平排列
          bottom: 5, // 放置在底部
          left: "center", // 水平居中
          width: "auto", // 宽度自适应
          textStyle: {
            color: "white",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["60%", "80%"],
            label: {
              show: false, // 隐藏数据标签
            },
            labelLine: {
              show: false, // 隐藏正常状态下的引导线
            },
            avoidLabelOverlap: false,
            center: ["50%", "45%"],
            data: [
             
              { value: 20, name: "博士", itemStyle: { color: '#00a98f' } },
              { value: 20, name: "硕士", itemStyle: { color: '#ff4c4c' } },
              { value: 30, name: "本科", itemStyle: { color: '#0099e5' } },
              { value: 30, name: "大专", itemStyle: { color: '#34bf49' } },
            
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              labelLine: {
                show: false,
              },
            },
          },
        ],
      };

      // 使用配置项显示图表
      myChart.setOption(option);
    },
  },
  mounted() {
    // 在组件挂载后初始化ECharts实例
    this.initECharts();
  },
});
</script>

<style>
.EducationlevelBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.chart-container {
  flex: 1; /* 占满剩余空间 */
}
</style>